﻿@{
    Layout = null;
    var objUserInfo = ViewBag.UserInfo as UserInfo;
    string attachUrls = "userId=" + Request["UserId"] + "&userName=" + Request["UserName"] + "&avatar" + Request["Avatar"];
}
@model ArticleResultInfo
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=no,email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="renderer" content="webkit" />
    <title>@Model.ArticleInfo.ArticleTitle</title>
    <link type="text/css" rel="stylesheet" href="/Content/cjcourse/pkg/base.css">
    <link type="text/css" rel="stylesheet" href="/Content/cjcourse/pkg/combine.css">
    <link type="text/css" rel="stylesheet" href="/Content/cjcourse/plugins/modal/modal.css">
    <link type="text/css" rel="stylesheet" href="/Content/cjcourse/plugins/swiper3/swiper.min.css">
    <link type="text/css" rel="stylesheet" href="/Content/cjcourse/plugins/swiper3/swiper.scale.css">
    <link type="text/css" rel="stylesheet" href="/Content/cjcourse/css/layout.css">
    <link type="text/css" rel="stylesheet" href="~/Content/resources/emotion/css/emotion.css" />
    <style>
        @@-webkit-keyframes load {
            from {
                -webkit-transform: rotate(0deg) translateZ(0);
            }

            to {
                -webkit-transform: rotate(360deg) translateZ(0);
            }
        }

        #article_content img, #article_content video {
            max-width: 100%;
        }
        .page-gap{
            padding: 0 20px;
        }
    </style>
</head>
<body>
    <div id="wrapper" class="detail">
        <div class="container nplr">
            <div class="header" style="margin: 0 20px; padding: 0 0 20px 0;">
                <div class="user-avatar" style="background-image:url(@Model.ArticleInfo.S1)"></div>
                <div class="user-info">
                    <div class="gray" style="min-height: 20px;">@Model.ArticleInfo.ArticleAuthor</div>
                    <div>@Model.ArticleInfo.ArticleTitle</div>
                </div>
            </div>
            <div id="article_content" class="content page-gap">
                @Html.Raw(Model.ArticleContent)
            </div>            
            @if (Model.ArticlePictureCollection.IsNoNull())
                        {
                            int i = 1;
                <ul id="article_imagelist" class="image-list page-gap clearfix">
                    @foreach (var objArticlePicture in Model.ArticlePictureCollection)
                                {
                        <li id="img@(i)" style="background-image:url(@objArticlePicture.PictureUrl)" data-url="@objArticlePicture.PictureUrl"></li>
                                    i++;
                                }
                </ul>
        }
        <div class="topic-info text-right">
            <div class="page-gap">
                <div class="time float-left">@Model.ArticleInfo.ApproveDate.ToString("yyyy-MM-dd")</div>
                <div class="interact">
                    <span onclick="DiggArticle(@Model.ArticleInfo.ArticleId)">
                        <i id="diggclass" class="icomoon @Html.Raw(Model.ArticleInfo.IsDigg ? "icon-praised" : "icon-praise") color"></i>
                        <span id="diggcount" class="margin-right-10">@Model.ArticleInfo.DiggCount</span>
                    </span>
                    <span>
                        <i id="btnComment" class="icomoon icon-edit color"></i>
                        <span id="commentcount">@Model.ArticleInfo.CommentCount</span>
                    </span>
                </div>
            </div>
            <div id="comment-input" class="relative" style="display: none;">
                <div class="margin-top-10 page-gap">
                    <textarea id="txtComment" class="input-text width-full" data-emotion></textarea>
                    <div class="text-align-right relative" style="margin-top:8px;">
                        <i id="btnEmotionSelect" class="icomoon icon-emotion btn-emotion" style="position:absolute; left:0;"></i>
                        <button id="btnSubmitComment" type="button" class="button" style="padding:3px 15px;" onclick="AddComment('@Model.ArticleInfo.ArticleId')">发表</button>
                    </div>
                </div>
            </div>
            <div data-part="emotion" class="emotion-hidden" style="margin-top: -10px;"></div>
        </div>
        <div class="page-gap">
            <ul id="commentlist" class="comments list nplr"></ul>
        </div>
        <div id="loadingText" class="text-center padding-10">正在加载...</div>
</div>
    </div>
    <script type="text/javascript" charset="utf-8" src="/Content/cjcourse/js/zepto/zepto.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/Content/cjcourse/js/zepto/selector.js"></script>
    <script type="text/javascript" charset="utf-8" src="/Content/cjcourse/js/zepto/compatibleIE9.js"></script>
    <!--<script src="js/animation/tween.js"></script>-->
    <script type="text/javascript" charset="utf-8" src="/Content/cjcourse/js/fastclick/fastclick.js"></script>
    <script type="text/javascript" charset="utf-8" src="/Content/cjcourse/plugins/modal/modal.js"></script>
    <script type="text/javascript" charset="utf-8" src="/Content/cjcourse/plugins/swiper3/swiper.jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/Content/cjcourse/plugins/swiper3/swiper.scale.js"></script>
    <script type="text/javascript" charset="utf-8" src="/Content/cjcourse/js/global.js"></script>
    <script src="~/Content/resources/iutility-1.0.src.js"></script>
    <script src="/Content/js/common/Bigger.js"></script>
    <script src="/Content/js/scroll/scrollpagination.js"></script>
    <script type="text/javascript">
    $(function () {
        var userInfo = JSON.parse('@Html.Raw( objUserInfo.JsonSerialize())');
        BindComments(10);
        IncreaseArticle('@Model.ArticleInfo.ArticleId');
        $("#btnComment").click(toggleCommentInput);
        $("#btnEmotionSelect").click(toggleEmotion);
        iUtility.LoadEmotion("/Content/resources/emotion/emcode.html");
    });
    function toggleEmotion(show) {
        var $emotion = $("[data-part='emotion']");
        if (!show || $emotion.is(":visible")) {
            $emotion.hide();
        } else {
            $emotion.show();
        }
    }
    function BindComments(loadcount) {
        loadcount = loadcount || 10;
        $("#commentlist").scrollPagination({
            //contentPage: "/cjcourse/getarticlelist?categoryId=8&pageIndex=" + pageIndex + "&pageSize=" + pageSize,
            contentData: {},
            container: $(this),
            scrollTarget: $(window),
            heightOffset: 10,
            beforeLoad: function (options) {
                $("#loadingText").show();
                var commentId = $("#commentlist li:last").attr("data-id");
                options.contentPage = "/cjcourse/getcommentlist?articleId=@Model.ArticleInfo.ArticleId&loadCount=" + loadcount + (typeof (commentId) == "undefined" ? "" : "&commentId=" + commentId+"&@attachUrls");
                },
                appendItems: function (objInvokeResult) {
                    $("#loadingText").hide();

                    if (objInvokeResult.ResultCode == "CommentNull") {
                        //todo：移除更多事件
                        $("#comment_more").removeAttr("onclick");
                        $("#comment_more").hide();
                        //停止滚动加载
                        $("#commentlist").stopScrollPagination();
                        return;
                    }
                    if (objInvokeResult.ResultCode != "Success") {
                        alert(objInvokeResult.ResultMessage);
                        return;
                    }
                    if (objInvokeResult.Data.CommentList.length < loadcount) {
                        //停止滚动加载
                        $("#commentlist").stopScrollPagination();
                        $("#comment_more").removeAttr("onclick");
                        $("#comment_more").hide();
                    } else {
                        //$("#article_more").show();
                    }


                    var commentId = $("#commentlist li:last").attr("data-id");
                    var floor = $("#commentlist li:last").attr("data-floor");
                    if (typeof (floor) == "undefined" && objInvokeResult.Data.CommentCount != 0) {
                        floor = objInvokeResult.Data.CommentCount;
                    } else {
                        floor = parseInt(floor) - 1;
                    }

                    var html = "";
                    $.each(objInvokeResult.Data.CommentList, function (i, objCommentInfo) {
                        objCommentInfo.CreateDate = convertUnixTime(objCommentInfo.CreateDate, "yyyy-MM-dd");
                        html += CreateCommentHtml(objCommentInfo, floor);
                        floor--;
                    });

                    $("#commentlist").append(html);
                },
                afterLoad: function (objInvokeResult) {

                }
            });
        }

        function CreateCommentHtml(objCommentInfo, floor) {
            var html = "";
            if (typeof (objCommentInfo) == "undefined") {
                return html;
            }
            html =
                '<li id="li_' + floor + '" data-id="' + objCommentInfo.CommentId + '" data-floor=' + floor + '>' +
                    '<a class="user-avatar" style="background-image:url(' + objCommentInfo.Avatar + ')"></a>' +
                    '<div class="user-info">' +
                        '<div class="name text-right">' +
                            '<a class="text fl">' + objCommentInfo.NickName + '</a>' +
                            '<span class="floor">第' + floor + '楼</span>' +
                        '</div>' +
                        '<div class="comment">' + Emotion.replace(objCommentInfo.Content, "/Content/resources/emotion/mp/") + '</div>' +
                        '<div class="time">' + objCommentInfo.CreateDate + '</div>' +
                    '</div>' +
                '</li>';
            return html;
        }

        function DiggArticle(articleId) {
            var objAjaxEntity = new AjaxEntity();
            objAjaxEntity.url = "/cjcourse/diggarticle/" + articleId;
            objAjaxEntity.data =
                {
                    userId: "@objUserInfo.UserId",
                    userName: "@objUserInfo.UserName",
                    avatar: "@objUserInfo.Avatar"
                };
            objAjaxEntity.executeSuccess = function (objInvokeResult) {
                if (objInvokeResult.ResultCode != "Success") {
                    alert(objInvokeResult.ResultMessage);
                    return;
                }
                $("#diggcount").html(parseInt($("#diggcount").html()) + 1);
                $("#diggclass").removeClass("icon-praise").addClass("icon-praised");
            }
            objAjaxEntity.execute();
        }

        function IncreaseArticle(articleId) {
            var objAjaxEntity = new AjaxEntity();
            objAjaxEntity.url = "/cjcourse/increaseviewcount/" + articleId;
            objAjaxEntity.executeSuccess = function (objInvokeResult) { };
            objAjaxEntity.execute();
        }

        function AddComment(articleId) {
            var content = $("#txtComment").val();//todo：读取内容
            if (content == "" || content.replace(/\s/g, "") == "") {
                alert("对不起，请您输入评论内容");
                return;
            }
            if (content.length > 400) {
                alert("内容不能超过400字");
                return;
            }
            var objAjaxEntity = new AjaxEntity();
            objAjaxEntity.url = "/cjcourse/addcomment";
            objAjaxEntity.data =
                {
                    articleId: articleId,
                    content: content,
                    userId: "@objUserInfo.UserId",
                userName: "@objUserInfo.UserName",
                avatar: "@objUserInfo.Avatar",
            };
        objAjaxEntity.executeSuccess = function (objInvokeResult) {
            if (objInvokeResult.ResultCode == "Success") {
                var floor = $("#commentlist li:first").attr("data-floor");
                if (typeof (floor) == "undefined") {
                    floor = 1;
                } else {
                    floor = parseInt(floor) + 1;
                }

                var objCommentInfo = {
                    CommentId: objInvokeResult.Data,
                    Avatar: "@objUserInfo.Avatar",
                    NickName: "@objUserInfo.UserName",
                    CreateDate: new Date().pattern("yyyy-MM-dd HH:mm:ss"),
                    Content: content
                };
                $("#commentlist").prepend(CreateCommentHtml(objCommentInfo, floor));
                $("#comment-input").hide();
                $("#txtComment").val("");
                $("#commentcount").html(parseInt($("#commentcount").html()) + 1);
            } else {
                alert(objInvokeResult.ResultMessage);
            }
        }
        objAjaxEntity.execute();
    }

    function toggleCommentInput(show) {
        if (!show || $("#comment-input").is(":visible")) {
            toggleEmotion(false);
            $("#comment-input").hide();
        } else {
            $("#comment-input").show();
            $("#txtComment").focusin(function () {
                $(this).focusEnd();
            });
        }
    }

    $("#article_imagelist > li").on("click", function () {
        var mySwiper = slideImage({
            container: $(this).closest("ul"),
            selector: "li",
            current: $(this).index()
        });
    });


    //$("#article_content img").each(function (idx, el) {
    //    var $this = $(this);
    //    $this.attr("data-url", $this.attr("src"));
    //    $this.on("click", function () {
    //        slideImage({
    //            container: "#article_content",
    //            selector: "img",
    //            current: idx
    //        })
    //    });
    //});

    </script>
</body>
</html>